<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端起步 | LinCMS-TP5入门</title>
    <meta name="generator" content="VuePress 1.5.0">
    
    <meta name="description" content="基于ThinkPHP 5.1的 Lin CMS 后端实现。">
    <link rel="preload" href="/lin-cms-book/assets/css/0.styles.e8c0fe6e.css" as="style"><link rel="preload" href="/lin-cms-book/assets/js/app.43f3ff7b.js" as="script"><link rel="preload" href="/lin-cms-book/assets/js/2.1c264783.js" as="script"><link rel="preload" href="/lin-cms-book/assets/js/12.0fb72fc4.js" as="script"><link rel="prefetch" href="/lin-cms-book/assets/js/10.b29049a1.js"><link rel="prefetch" href="/lin-cms-book/assets/js/11.5fc2ad3e.js"><link rel="prefetch" href="/lin-cms-book/assets/js/3.12364cb0.js"><link rel="prefetch" href="/lin-cms-book/assets/js/4.606d0aff.js"><link rel="prefetch" href="/lin-cms-book/assets/js/5.7bb207a9.js"><link rel="prefetch" href="/lin-cms-book/assets/js/6.1906fec0.js"><link rel="prefetch" href="/lin-cms-book/assets/js/7.2d983749.js"><link rel="prefetch" href="/lin-cms-book/assets/js/8.03718c42.js"><link rel="prefetch" href="/lin-cms-book/assets/js/9.2e1a8f4e.js">
    <link rel="stylesheet" href="/lin-cms-book/assets/css/0.styles.e8c0fe6e.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/lin-cms-book/" class="home-link router-link-active"><!----> <span class="site-name">LinCMS-TP5入门</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/lin-cms-book/" class="nav-link">
  简介
</a></div><div class="nav-item"><a href="/lin-cms-book/start/server_deploy.html" class="nav-link">
  入门
</a></div><div class="nav-item"><a href="/lin-cms-book/dev/" class="nav-link">
  开发文档
</a></div><div class="nav-item"><a href="/lin-cms-book/log/" class="nav-link">
  版本日志
</a></div><div class="nav-item"><a href="/lin-cms-book/qa/" class="nav-link">
  常见问题
</a></div><div class="nav-item"><a href="http://doc.cms.7yue.pro/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  林间有风
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/ChenJinchuang/lin-cms-tp5" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/lin-cms-book/" class="nav-link">
  简介
</a></div><div class="nav-item"><a href="/lin-cms-book/start/server_deploy.html" class="nav-link">
  入门
</a></div><div class="nav-item"><a href="/lin-cms-book/dev/" class="nav-link">
  开发文档
</a></div><div class="nav-item"><a href="/lin-cms-book/log/" class="nav-link">
  版本日志
</a></div><div class="nav-item"><a href="/lin-cms-book/qa/" class="nav-link">
  常见问题
</a></div><div class="nav-item"><a href="http://doc.cms.7yue.pro/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  林间有风
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/ChenJinchuang/lin-cms-tp5" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/lin-cms-book/start/server_deploy.html" class="sidebar-link">后端起步</a></li><li><a href="/lin-cms-book/start/vue_deploy.html" aria-current="page" class="active sidebar-link">前端起步</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/lin-cms-book/start/vue_deploy.html#你需要了解" class="sidebar-link">你需要了解</a></li><li class="sidebar-sub-header"><a href="/lin-cms-book/start/vue_deploy.html#client-端必备环境" class="sidebar-link">Client 端必备环境</a></li><li class="sidebar-sub-header"><a href="/lin-cms-book/start/vue_deploy.html#下载工程代码" class="sidebar-link">下载工程代码</a></li><li class="sidebar-sub-header"><a href="/lin-cms-book/start/vue_deploy.html#安装依赖包" class="sidebar-link">安装依赖包</a></li><li class="sidebar-sub-header"><a href="/lin-cms-book/start/vue_deploy.html#运行" class="sidebar-link">运行</a></li><li class="sidebar-sub-header"><a href="/lin-cms-book/start/vue_deploy.html#完成登录" class="sidebar-link">完成登录</a></li></ul></li><li><a href="/lin-cms-book/start/server_demo.html" class="sidebar-link">后端上手</a></li><li><a href="/lin-cms-book/start/vue_demo.html" class="sidebar-link">前端上手</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="前端起步"><a href="#前端起步" class="header-anchor">#</a> 前端起步</h1> <blockquote><p><strong>WARNING</strong><br>
阅读本小节前，请确保你已经完成了服务端部署，否则在登录时将无法通过权鉴认证。</p></blockquote> <h2 id="你需要了解"><a href="#你需要了解" class="header-anchor">#</a> 你需要了解</h2> <p>Lin 的前端是基于 Vue 的，所以你必须首先安装一些支持 Vue 的运行环境以及必备工具。无需担心，正如同我们之前运行 Server 时的步骤一样，前端的起步依然非常简单。</p> <h2 id="client-端必备环境"><a href="#client-端必备环境" class="header-anchor">#</a> Client 端必备环境</h2> <ul><li>安装 <code>Node.js</code>（version：8.11.0+）</li> <li>确保 <code>npm</code> 或者 <code>yarn</code> 可用</li></ul> <h2 id="下载工程代码"><a href="#下载工程代码" class="header-anchor">#</a> 下载工程代码</h2> <p>打开命令行工具，键入以下命令：</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">git</span> clone https://github.com/TaleLin/lin-cms-vue.git
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="安装依赖包"><a href="#安装依赖包" class="header-anchor">#</a> 安装依赖包</h2> <p>进入工程项目根目录后，打开命令行依次输入以下三条命令:</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># 设置npm源为淘宝源</span>
<span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npm.taobao.org
<span class="token comment"># 设置node_sass安装源为淘宝源</span>
<span class="token function">npm</span> config <span class="token builtin class-name">set</span> sass_binary_site https://npm.taobao.org/mirrors/node-sass/
<span class="token comment"># 安装项目依赖</span>
<span class="token function">npm</span> <span class="token function">install</span> 
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="运行"><a href="#运行" class="header-anchor">#</a> 运行</h2> <p>因为 Lin 是基于 <code>vue-cli3</code> 开发的，那么默认的本地服务启动的命令：</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> run serve
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p><strong>Node 版本要求</strong><br>
Vue CLI 需要<a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node.js<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 8.9或更高版本 (推荐 8.11.0+)。你可以使用 <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">nvm<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>或 <a href="https://github.com/coreybutler/nvm-windows" target="_blank" rel="noopener noreferrer">nvm-windows<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>在同一台电脑中管理多个 Node 版本。</p></blockquote> <h2 id="完成登录"><a href="#完成登录" class="header-anchor">#</a> 完成登录</h2> <ol><li>通过管理员账号密码登录，<a href="/lin-cms-book/start/server_deploy.html">账号密码</a>通过<code>起步</code>中脚本创建。</li></ol> <p>到此，通过脚手架内置的 webpack 本地服务，访问http://localhost:8080，将打开 Lin 的登录页面，接下来你可以查看前端代码的目录结构，对 Lin 有一个初步认识。</p> <p><strong>接下来我们来完成一个简单的<a href="/lin-cms-book/start/vue_demo.html">demo</a>帮助开发者更快的熟悉 Lin。</strong></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">最后更新时间:</span> <span class="time">10/7/2020, 11:20:01 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/lin-cms-book/start/server_deploy.html" class="prev">
        后端起步
      </a></span> <span class="next"><a href="/lin-cms-book/start/server_demo.html">
        后端上手
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/lin-cms-book/assets/js/app.43f3ff7b.js" defer></script><script src="/lin-cms-book/assets/js/2.1c264783.js" defer></script><script src="/lin-cms-book/assets/js/12.0fb72fc4.js" defer></script>
  </body>
</html>
